const board = new Board('box', {
  width: document.documentElement.clientWidth,
  height: document.documentElement.clientHeight - 64,
  offset: { x: 0, y: 64 }
});

function render() {
  board.render();
}

document.querySelectorAll('.tool-item').forEach((v) => {
  v.addEventListener('click', (e) => {
    addGeometry(v, e);
  });
});

function getType(element) {
  return element.getAttribute('data-type');
}

let distance = 500;
let angle = 0;
function addGeometry(element, event) {
  const type = getType(element);
  let geometry;
  if (type === '2d') {
    geometry = new CoordinateAxis({ x: 900, y: 500 }, 300);
  }
  if (type === '3d') {
    geometry = new CoordinateAxis({ x: 500, y: 500 }, 300, '3d');
  }
  if (type === 'text') {
    geometry = new Text('绘制的文字', { x: distance, y: distance, angle });
  }
  if (type === 'line') {
    geometry = new Line();
  }
  if (geometry) {
    board.addShape(geometry);
    render();
  }
}

board.registerUserEvent('mouseup', render);